---
order: 1.13
category: '@threlte/extras'
sourcePath: 'packages/extras/src/lib/hooks/useGltfAnimations.ts'
title: useGltfAnimations
type: 'hook'
---

A convenience hook to use gltf animations loaded by a [\<GLTF>](/docs/reference/extras/gltf) component or by the [`useGltf`](/docs/reference/extras/use-gltf) hook.

<Example path="extras/use-gltf-animations" />

<small>
  Model: [Littlest Tokyo](https://artstation.com/artwork/1AGwX) by [Glen
  Fox](https://artstation.com/glenatron), CC Attribution.
</small>

## Examples

### With the `<GLTF>` component

Without any arguments, `useGltfAnimations` returns a store which can be bound to the `<GLTF>` component.

```svelte
<script lang="ts">
  import { GLTF, useGltfAnimations } from '@threlte/extras'

  const { gltf, actions, mixer } = useGltfAnimations<'All Animations'>()
  mixer.timeScale = 0.5

  export const triggerAnimation = () => {
    $actions['All Animations']?.play()
  }
</script>

<GLTF
  url="/path/to/model.glb"
  bind:gltf={$gltf}
/>
```

### With the `useGltf` hook

For cases where you want to reuse parts of the GLTF such as materials, nodes, or the embedded camera, `useGltfAnimations` accepts a writable store as its first argument. [`useGltf`](/docs/reference/extras/use-gltf) returns a store that can be directly passed to `useGltfAnimations`.

```svelte
<script lang="ts">
  import { T } from '@threlte/core'
  import { useGltfAnimations, useGltf } from '@threlte/extras'

  const gltf = useGltf('/path/to/model.glb')
  const { actions, mixer } = useGltfAnimations<'All Animations'>(gltf)

  $effect(() => {
    $actions['All Animations']?.play()
  })
</script>

{#await gltf then { scene }}
  <T is={scene} />
{/await}
```

## Applying Animations to a Different Root

`useGltfAnimations`'s second optional argument allows you to apply the animations to a root other than the GLTF scene.

```svelte
<script>
  import { useGltfAnimations, useGltf } from '@threlte/extras'
  import { Group } from 'three'

  const gltf = useGltf('/path/to/model.glb')

  const group = new Group()

  const { root } = useGltfAnimations(gltf, group)
  // $root === group
</script>

{#await gltf then { scene }}
  <T is={group}>
    <T is={scene} />
  </T>
{/await}
```

You can also set the root store without passing in the second argument

```svelte
<script>
  import { useGltfAnimations, useGltf } from '@threlte/extras'
  import { Group } from 'three'

  const gltf = useGltf('/path/to/model.glb')

  const { root } = useGltfAnimations(gltf)
</script>

{#await gltf then { scene }}
  <T.Group bind:ref={$root}>
    <T is={scene} />
  </T.Group>
{/await}
```
